<html>
<head>
<script type="text/javascript">

if(!Date.now) {
  Date.now = function now() {
    return new Date().getTime();
  };
}

var x=document.getElementById("demo");
function getLocation()
{
	if (navigator.geolocation)
		navigator.geolocation.getCurrentPosition(showPosition);
	else
		x.innerHTML="Geolocation is not supported by this browser.";
}
function showPosition(position)
{
	x.innerHTML="Latitude: " + position.coords.latitude + 
	"<br>Longitude: " + position.coords.longitude; 
}

//getLocation();

var WebCollector_start_time = new Date().getTime();

var jquery_version = '1.9.1';
//var repositorio_jquery = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js';
var repositorio_jquery = 'jquery.min.js';
var maxAttemptsToLoadWebCollector = 20;
var WebCollectorServer = 'http://localhost/WebCollector.php';
var intervalToSendData = 20000;
var contextWebCollector = "html";
var globalTimerResize = null;
var globalTimerMouseMove = null;
var ivar = 0;
var timeout_limit = 2000;
var isMouseMoving = false;
var MousePositionStart, MousePositionEnd;

if(!(window.jQuery && window.jQuery.fn.jquery == jquery_version)) 
{
	var s = document.createElement('script');
	s.setAttribute('src', repositorio_jquery);
	s.setAttribute('type', 'text/javascript');
	document.getElementsByTagName('head')[0].appendChild(s);
}

var WebCollectorEvent = function(id, value){
	if(!value) value = '';
	this.id = id;
	this.value = value;
	this.time = Date.now();
}	

WebCollector = {
	startedAt: WebCollector_start_time,
	attemptsToLoadjQuery : 0,
	EventsToSend: new Array(),
	addData: function(WCEvent){
				this.EventsToSend.push(WCEvent);
			  },
	send:function(sync){
		async_value = true;
		if(sync)
			async_value = false;

		var json_string = JSON.stringify(WebCollector.EventsToSend);
		//console.log("enviando "+WebCollector.EventsToSend.length);
		WebCollector.EventsToSend.length = 0;

		$.ajax({
			url: WebCollectorServer,
			data: {dados: json_string},
			async: async_value,
			dataType: 'jsonp',
			type: 'POST',
			jsonp: false
		});
		
	},
	getScreenSizeInformation: function(){
		WebCollector.addData(new WebCollectorEvent(7, $(window).width()+"--"+$(window).height()));
		WebCollector.addData(new WebCollectorEvent(8, $(document).width()+"--"+$(document).height()));
		WebCollector.addData(new WebCollectorEvent(9, screen.width+"--"+screen.height));
	}
	,
	doneResize: function(){
		WebCollector.addData(new WebCollectorEvent(10, Date.now()));
		WebCollector.getScreenSizeInformation();
	},
	init: function() {
		WebCollector.addData(new WebCollectorEvent(1, this.attemptsToLoadjQuery));
		WebCollector.addData(new WebCollectorEvent(4, document.URL));
		WebCollector.getScreenSizeInformation();
		WebCollector.send();
		window.setInterval(WebCollector.send, intervalToSendData);
		
		$('*', contextWebCollector).on("click", function(e){ 
			//console.log(this);
			WebCollector.addData(new WebCollectorEvent(6, $(this).prop("tagName")+"--"+$(this).attr("id")+"--"+e.pageX+"--"+e.pageY));
			return false;
		});

		$(window).on('beforeunload', function(){
			WebCollector.addData(new WebCollectorEvent(3,Date.now()));
			WebCollector.send(true);		
		}).resize(function(){
			clearTimeout(globalTimerResize);
			globalTimerResize = setTimeout(WebCollector.doneResize, 500);
		});
		
		$(':text').on('keydown', function(){
			//console.log(this);
		});
		
		$(document).mousemove(function(event) {
			clearTimeout(globalTimerMouseMove);
			if(!isMouseMoving){
				//console.log(event.pageX+" "+event.pageY);
				isMouseMoving = true;
				MousePositionStart = event.pageX+"*"+event.pageY;
			}
			MousePositionEnd = event.pageX+"*"+event.pageY;
			globalTimerMouseMove = setTimeout(WebCollector.doneMouseMove, 500);
		});

	},
	doneMouseMove: function(){
		WebCollector.addData(new WebCollectorEvent(11, MousePositionStart+"--"+MousePositionEnd));
		isMouseMoving = false;
	},
	checkjQueryIsLoaded: function(){
		if(!(window.jQuery && window.jQuery.fn.jquery == jquery_version)) {
			WebCollector.attemptsToLoadjQuery++;
			if(WebCollector.attemptsToLoadjQuery < maxAttemptsToLoadWebCollector) 
				setTimeout(WebCollector.checkjQueryIsLoaded, 50);
			else { 
				console.log("Erro ao iniciar WebCollector, jQuery não pode ser carregada");
			}
		}
		else{
			WebCollector.init();
		}
	}
}

window.onload = function(){ getLocation(); WebCollector.addData(new WebCollectorEvent(2, Date.now())); console.log("windows.load");};

WebCollector.checkjQueryIsLoaded();
WebCollector.addData(new WebCollectorEvent(0,WebCollector_start_time));

/*-----------		Detect Inactivity Time		--------------------*/
var EpochCounterStart = Date.now();
var EpochCounterEnd = 0;

document.onclick = function() {
    EpochCounterEnd = Date.now();
	if( (EpochCounterEnd -EpochCounterStart) > timeout_limit ){
		WebCollector.addData(new WebCollectorEvent(5,EpochCounterStart+"--"+EpochCounterEnd));
		EpochCounterStart = Date.now();
	}
};

document.onmousemove = function() {
    EpochCounterEnd = Date.now();
	if( (EpochCounterEnd -EpochCounterStart) > timeout_limit ){
		WebCollector.addData(new WebCollectorEvent(5,EpochCounterStart+"--"+EpochCounterEnd));
		EpochCounterStart = Date.now();
	}
};

document.onkeypress = function() {
    EpochCounterEnd = Date.now();
	if( (EpochCounterEnd -EpochCounterStart) > timeout_limit ){
		WebCollector.addData(new WebCollectorEvent(5,EpochCounterStart+"--"+EpochCounterEnd));
		EpochCounterStart = Date.now();
	}
};
/*-----------		Detect Inactivity Time END		--------------------*/

/*tentar resolver problema de saber se um input 
		foi digitado completamente
		autocompletado pelo navegador
		ou colado usando CRTL+V
*/
</script>
</head>
<body style="background-color: yellow;">
	<div id="div_black" style="position:absolute; width:200px; height:200px; left:100px; top:100px; background-color:black;">
		<div style="background-color:white; width:100px; height:100px;"></div>
	</div>
	<input type="text" name="fname"><br>
	<div id="x"> </div>
</body>
</html>